<script setup lang="ts">
type MenuItem = {
    key: string;
    title: string;
    icon: string;
    img: string;
    fold: boolean;
    active: boolean;
    options: MenuItem[];
};
type Props = {
    fold: boolean;
    menu: MenuItem[];
};
const props = withDefaults(defineProps<Props>(), {
    fold: false,
    menu: () => [],
});
const emits = defineEmits(["update:fold", "update:menu"]);
const clearActive = () => {
    props.menu.forEach((v) => ((v.active = false), v.options.forEach((v2) => ((v2.active = false), v2.options.forEach((v3) => (v3.active = false))))));
};
</script>

<template>
    <aside :class="{ 'my-menu': true, fold: props.fold }">
        <ul>
            <li v-for="v in props.menu" :key="v.key" :class="{ fold: v.fold }" :style="{ height: v.fold ? v.options.map((v2) => (v2.fold ? v2.options.length * 50 + 50 : 50)).reduce((a, b) => a + b, 50) + 'px' : '50px' }">
                <button :class="{ active: v.active }" @click="v.options.length ? (v.fold = !v.fold) : (clearActive(), (v.active = true))">
                    <figure>
                        <svg v-if="v.icon" class="icon" aria-hidden="true"><use :xlink:href="'#icon-' + v.icon"></use></svg>
                        <img v-if="v.img" :src="v.img" alt="" />
                    </figure>
                    <span>{{ v.title }}</span>
                    <svg v-if="v.options.length" class="icon link" aria-hidden="true"><use xlink:href="#icon-icon_on_the_down"></use></svg>
                </button>
                <ul>
                    <li v-for="v2 in v.options" :key="v2.key" :class="{ fold: v2.fold }" :style="{ height: v2.fold ? v2.options.length * 50 + 50 + 'px' : '50px' }">
                        <button :class="{ active: v2.active }" @click="v2.options.length ? (v2.fold = !v2.fold) : (clearActive(), (v2.active = true))">
                            <figure>
                                <svg v-if="v2.icon" class="icon" aria-hidden="true"><use :xlink:href="'#icon-' + v2.icon"></use></svg>
                                <img v-if="v2.img" :src="v2.img" alt="" />
                            </figure>
                            <span>{{ v2.title }}</span>
                            <svg v-if="v2.options.length" class="icon link" aria-hidden="true"><use xlink:href="#icon-icon_on_the_down"></use></svg>
                        </button>
                        <ul>
                            <li v-for="v3 in v2.options" :key="v3.key" :class="{ fold: v3.fold }">
                                <button :class="{ active: v3.active }" @click="clearActive(), (v3.active = true)">
                                    <figure>
                                        <svg v-if="v3.icon" class="icon" aria-hidden="true"><use :xlink:href="'#icon-' + v3.icon"></use></svg>
                                        <img v-if="v3.img" :src="v3.img" alt="" />
                                    </figure>
                                    <span>{{ v3.title }}</span>
                                    <svg v-if="v3.options.length" class="icon link" aria-hidden="true"><use xlink:href="#icon-icon_on_the_down"></use></svg>
                                </button>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <button class="fold-btn" @click="emits('update:fold', !props.fold)">
            <svg class="icon link" aria-hidden="true"><use xlink:href="#icon-shouqi"></use></svg>
        </button>
    </aside>
</template>

<style scoped lang="scss">
.my-menu {
    position: relative;
    flex-shrink: 0;
    width: 200px;
    box-shadow: 0 0 3px 1px #ccc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    z-index: 2;
    transition: all 0.2s;
    overflow: auto;
    &::-webkit-scrollbar {
        display: none;
    }
    &.fold {
        width: 50px;
        ul button {
            padding: 0px;
            figure {
                margin: 5px 10px 5px 5px;
            }
        }
        .fold-btn .icon {
            transform: rotate(180deg);
        }
    }
    ul {
        display: flex;
        flex-direction: column;
        background-color: #f8f8f8;
        border-bottom: 1px solid #ccc;
        li {
            width: 200px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: all 0.2s;
            &.fold {
                > button > .link {
                    transform: rotate(180deg);
                }
            }
            &:has(.active) > button {
                color: #1676ff;
                .icon {
                    color: #1676ff;
                }
            }
            button {
                flex-shrink: 0;
                margin: 5px;
                padding: 0 20px;
                height: 40px;
                display: flex;
                color: #666;
                align-items: center;
                background-color: transparent;
                transition: all 0.2s;
                border-radius: 4px;
                &:hover {
                    background-color: #ccc;
                    transition: all 0.2s;
                }
                &.active {
                    color: #fff;
                    background-color: #1677ff;
                    .icon {
                        color: #fff;
                    }
                    img {
                        background-color: #fff;
                    }
                }
                figure {
                    flex-shrink: 0;
                    margin-right: 10px;
                    width: 30px;
                    height: 30px;
                    color: #666;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .icon {
                        font-size: 20px;
                    }
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 4px;
                        transition: all 0.2s;
                    }
                }
                .link {
                    flex-shrink: 0;
                    margin-right: 0;
                    font-size: 12px;
                    transition: all 0.2s;
                }
                span {
                    flex: 1;
                    font-size: 14px;
                    text-align: left;
                }
            }
            ul {
                background-color: #eee;
                li {
                    transition: all 0.2s;
                    button {
                        padding-left: 30px;
                    }
                    ul {
                        background-color: #d6d6d6;
                        li {
                            button {
                                padding-left: 40px;
                            }
                        }
                    }
                }
            }
        }
    }
    .fold-btn {
        flex-shrink: 0;
        height: 50px;
        background-color: #eee;
        transition: all 0.2s;
        .icon {
            font-size: 18px;
            transition: all 0.2s;
        }
        &:hover {
            background-color: #ccc;
        }
    }
}
</style>
